﻿@{
    Layout = null;
}

@* 参考网址： https://layuion.com/  *@

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link href="~/libs/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />
    <style>
        dd {
            cursor: pointer;
        }

        .site-active {
            padding-left: 20px !important;
        }
    </style>
</head>

<body yyy="l李四" class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">

        <div class="layui-header">
            <div class="layui-logo">方大同</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        咩咩
                    </a>
                </li>
                <li class="layui-nav-item"><a href="/basic/login">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">

                <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftmenu">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">基础资料</a>
                        <dl class="layui-nav-child">
                            <dd><a id="menua1" class="site-active" data-age="12" data-tabname="" data-address="泰山" xxx="张三" tab-name="权限管理" tab-url="/permission/index" tab-layid="1">权限管理</a></dd>
                            <dd><a class="site-active" tab-name="客户" tab-url="/permission/role" tab-layid="2">客户</a></dd>
                            <dd><a class="site-active" tab-name="商品明细" tab-url="/ProductDetails/ProductDetailsListView" tab-layid="3">商品明细</a></dd>
                            <dd><a class="site-active" tab-name="供应商" tab-url="/Supplier/SupplierList" tab-layid="4">供应商</a></dd>
                            <dd><a class="site-active" tab-name="商品分类(基础配置)" tab-url="/Productcategory/Index" tab-layid="5">商品分类(基础配置)</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">储位管理</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name="仓库定义" tab-url="/Repository/RepositoryList" tab-layid="6">仓库定义</a></dd>
                            <dd><a class="site-active" tab-name="库位定义" tab-url="/permission/person" tab-layid="8">库位定义</a></dd>
                            <dd><a class="site-active" tab-name=" 库位管理" tab-url="/permission/person" tab-layid="9"> 库位管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">入库管理 </a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name="其他入库" tab-url="/permission/person" tab-layid="10">其他入库</a></dd>
                            <dd><a class="site-active" tab-name="进货通知明细" tab-url="/PurchaseNoticeDetail/Index" tab-layid="11">进货通知明细</a></dd>
                            <dd><a class="site-active" tab-name="批量收货" tab-url="/BatchReceiving/List" tab-layid="12">批量收货</a></dd>
                            <dd><a class="site-active" tab-name="采购入库" tab-url="/permission/person" tab-layid="13">采购入库</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">出库管理</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name="其他出库" tab-url="/test/Default" tab-layid="14">其他出库</a></dd>
                            <dd><a class="site-active" tab-name="客户出货" tab-url="/test/Index" tab-layid="15">客户出货</a></dd>
                            <dd><a class="site-active" tab-name="出库通知" tab-url="/test/Index" tab-layid="16">出库通知</a></dd>
                            <dd><a class="site-active" tab-name="出库明细" tab-url="/OutboundDetails/List" tab-layid="17">出库明细</a></dd>
                            <dd><a class="site-active" tab-name="下架" tab-url="/Puff/TakenoffList" tab-layid="18">下架</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">退货管理</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name=" 客户退货" tab-url="/test/Default" tab-layid="19"> 客户退货</a></dd>
                            <dd><a class="site-active" tab-name="退货预约" tab-url="/test/Index" tab-layid="20">退货预约</a></dd>
                            <dd><a class="site-active" tab-name="退货验收" tab-url="/test/Index" tab-layid="21">退货验收</a></dd>
                            <dd><a class="site-active" tab-name="退货上架 " tab-url="/test/Index" tab-layid="22">退货上架 </a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">库内管理</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name="库内转移" tab-url="/test/Default" tab-layid="23">库内转移</a></dd>
                            <dd><a class="site-active" tab-name="库存查询" tab-url="/test/Index" tab-layid="24">库存查询</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">盘点管理</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name="盘点" tab-url="/test/Default" tab-layid="25">盘点</a></dd>
                            <dd><a class="site-active" tab-name="盘点差异" tab-url="/test/Default" tab-layid="26">盘点差异</a></dd>
                            <dd><a class="site-active" tab-name="库存调整" tab-url="/test/Default" tab-layid="27">库存调整</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">预警管理</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name="库存预警  " tab-url="/test/Default" tab-layid="28">库存预警  </a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">RBAC</a>
                        <dl class="layui-nav-child">
                            <dd><a class="site-active" tab-name=" 字典管理（计量单位、订单类型）" tab-url="/test/Default" tab-layid="29"> 字典管理（计量单位、订单类型）</a></dd>
                            <dd><a class="site-active" tab-name="权限管理" tab-url="/test/Index" tab-layid="30">权限管理</a></dd>
                            <dd><a class="site-active" tab-name="角色管理" tab-url="/test/Index" tab-layid="31">角色管理</a></dd>
                            <dd><a class="site-active" tab-name="用户管理" tab-url="/test/Index" tab-layid="32">用户管理</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 tab简单风格 class= layui-tab-brief -->
            <div class="layui-tab " lay-allowClose="true" lay-filter="tabList">
                <ul class="layui-tab-title">
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>


    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.9.21/layui/layui.js"></script>
    <script>

        var name = $("#menua1").attr("xxx");
        console.log(name)

        $("#menua1").attr("xxx", "大刀王五");
        var name2 = $("#menua1").attr("xxx");
        console.log(name2)

        //JavaScript代码区域  按需引入
        layui.use(['element', 'jquery'], function () {
            var element = layui.element,
                $ = layui.jquery;

            //触发事件
            var active = {
                tabAdd: function (name, url, layid) {
                    if (url != "" && url != null && url != undefined) {
                        element.tabAdd('tabList', {
                            title: name //'选项卡的标题'
                            , content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="' + url + '"></iframe>'//'选项卡的内容' //支持传入html
                            , id: layid//'选项卡标题的lay-id属性值'
                        });
                    }
                },
                tabChange: function (layid) {
                    element.tabChange('tabList', layid);
                }
            }

            //当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $('.site-active').on("click", function () {
                var dataid = $(this);
                var name = $(this).attr("tab-name");
                var url = $(this).attr("tab-url");
                var tab_layid = dataid.attr("tab-layid");

                //1、 判断tab-layid=layid的tab页是否打开
                if ($(".layui-tab-title li").length <= 0)
                {
                    //1.1 初始状态：1个Tab页也没有打开
                    active.tabAdd(name, url, tab_layid); //添加tab页
                    active.tabChange(tab_layid)//转到该tab页
                }
                else
                {
                    //1.2   判断该Tab页是否已打开
                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == tab_layid) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(name, url, tab_layid); //1.2.1  该Tab页未打开，则打开该tab页
                    }
                    active.tabChange(tab_layid)//1.2.2 转到该tab页
                }
                FrameWH();  //计算ifram层的大小
            });

            function FrameWH() { //计算ifram层的大小
                var h = $(window).height();
                $("iframe").css("height", h + "px");
            }

            $(window).resize(function () {
                FrameWH();
            })

            $(function () {
                active.tabAdd('权限管理', "/productdetails/ProductDetailsListView", 1); //打开tab页
                active.tabChange(1)//转到该tab页
                FrameWH();
            })
        });

    </script>
</body>
</html>